import type { HomeType } from '../../interface'
import type { ProgressBarProps } from 'antd-mobile/es/components/progress-bar'

import { Popover, ProgressBar } from 'antd-mobile'
import { Plate } from '../Plate'

import classNames from 'classnames/bind'
import styles from './index.module.less'

/** 进度条 */
const ProcessBarWrap = (
    props: {
        label: string
        /** 总数 */
        total: number
        /** 当前数量 */
        current: number
        /** 背景比例 */
        BackgroundRatio: number
    } & ProgressBarProps,
) => {
    const cx = classNames.bind(styles)
    return (
        <div className={cx('courseStatistics_process')}>
            <label className={cx('courseStatistics_process_label')}>{props.label}</label>

            <div className={cx('courseStatistics_process_content')}>
                <div className={cx('courseStatistics_process_data')}>
                    <Popover
                        style={{ color: '#FF943E' }}
                        content={`实际开班: ${props.current}`}
                        trigger="click"
                        placement="top"
                    >
                        <ProgressBar
                            style={{
                                width: `${props.BackgroundRatio}%`,
                                minWidth: '20%',
                                maxWidth: '100%',
                            }}
                            {...props}
                            /** 限制最大数值不超过100 */
                            percent={Math.min(props.percent ?? 0, 100)}
                        />
                    </Popover>
                </div>
                <div className={cx('courseStatistics_process_counter')}>
                    <span>{props.total}</span>
                </div>
            </div>
        </div>
    )
}

/** 开班统计 */
const CourseStatistics = (props: HomeType.CourseComponent<HomeType.CourseDatum[]>) => {
    const data = props.data.slice(0, props.maxShow)

    /** 最大的计划开班数 - 以这个数字计算{@link calcBackgroundRatio} */
    const maxCounter = Math.max.apply(
        null,
        data.map(({ all_group_total }) => all_group_total),
    )

    /** 计算宽度百分比 */
    const calcRatio = (v: number, base: number) => {
        const result = (v / base) * 100
        return Number.isNaN(result) ? 0 : result
    }

    const dataProcess = data.map(item => {
        return {
            ...item,
            /** 背景的比例 */
            BackgroundRatio: maxCounter === 0 ? 100 : calcRatio(item.all_group_total, maxCounter),
        }
    })

    const Title = <div>开班统计</div>

    return (
        <Plate className={`${styles.courseStatistics} ${props.className}`} title={Title}>
            <div className={styles.courseStatistics_legend}>
                <span className={styles.courseStatistics_legend_plan}>计划开班</span>
                <span className={styles.courseStatistics_legend_real}>实际开班</span>
            </div>

            {dataProcess.map(item => {
                return (
                    <ProcessBarWrap
                        key={item.course_name}
                        label={item.course_name}
                        BackgroundRatio={item.BackgroundRatio}
                        total={item.all_group_total}
                        current={item.real_group_total}
                        percent={calcRatio(item.real_group_total, item.all_group_total)}
                    />
                )
            })}
        </Plate>
    )
}

export default CourseStatistics
